<template>
    <div>
        <div class="container" v-if="isShow">
            <el-button type="primary" icon="el-icon-plus" @click="contactsAdd" style="margin-bottom: 16px">新增
            </el-button>
            <el-table
                    :data="contactsData"
                    border
                    class="table"
                    ref="contactsData"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="conId" label="联系人编号" align="center" width="200"></el-table-column>
                <el-table-column prop="conName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="conPhone" label="电话" align="center"></el-table-column>
                <el-table-column prop="createdAccount" label="创建者" align="center"></el-table-column>
                <el-table-column prop="createdTime" label="创建时间" align="center" width="160" sortable></el-table-column>
                <!--  <el-table-column prop="conRmk" label="备注" :show-overflow-tooltip="true"
                                   align="center"></el-table-column>-->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="contactsEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="contactsDelete(scope.$index, scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增联系人弹出框 -->
        <div v-if="addContactsVisible" style="width: 90%;height: 200px">
            <el-form ref="addContactsForm" :rules="contactsFormRules" :model="addContactsForm" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名:" prop="conName">
                            <el-input v-model="addContactsForm.conName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="电话:" prop="conPhone">
                            <el-input v-model="addContactsForm.conPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="说明:" prop="conRmk">
                            <el-input type="textarea" v-model="addContactsForm.conRmk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" style="float: right;">
                <el-button @click="closeContactsAdd">取 消</el-button>
                <el-button type="primary" @click="saveContactsAdd">确 定</el-button>
            </span>
        </div>

        <!--编辑联系人弹出框-->
        <div v-if="editContactsVisible" style="width: 90%;height: 200px">
            <el-form ref="editContactsForm" :rules="contactsFormRules" :model="editContactsForm" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="姓名" prop="conName">
                            <el-input  v-model="editContactsForm.conName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="电话" prop="conPhone">
                            <el-input v-model="editContactsForm.conPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="说明" prop="conRmk">
                            <el-input type="textarea" v-model="editContactsForm.conRmk"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span style="float: right">
                <el-button  @click="colseContactsEdit">取 消</el-button>
                <el-button  type="primary" @click="saveContactsEdit()">确 定</el-button>
            </span>
        </div>
    </div>
</template>

<script>
    import {  selectPhoneByFkId,
        doAddContacts,
        selectByconId,
        doUpdateContacts,
        doDeleteContacts,} from '../api/contacts';
    export default {
        name: 'contacts',
        props:['fkId','keyId'],
        watch:{     //监听value的变化，进行相应的操作即可
            keyId: function(a,b){     //a是value的新值，b是旧值
                this.contactsQuery.fkId=this.fkId;
                this.isShow=true;
                this.addContactsVisible=false;
                this.editContactsVisible=false;
                this.getData();
            }
        },
        data() {
            return {
                contactsData: [],
                contactsPageTotal: 0,
                contactsQuery: {
                    fkId: this.fkId,
                },
                contactsFormRules: {
                    conName: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ],
                    conPhone: [
                        {required: true, message: '请输入电话', trigger: 'blur'},
                    ],
                },
                addContactsVisible: false,
                editContactsForm: {},
                editContactsVisible: false,
                addContactsForm: {},
                isShow:true,
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // 获取后台数据
            getData() {
                console.log("查询的contactsQuery",this.contactsQuery);
                selectPhoneByFkId(this.contactsQuery).then(res => {
                    if (res.success == true) {
                        /*this.isShow=true;
                        this.addContactsVisible=false;
                        this.editContactsVisible=false;*/
                        this.contactsData = res.data;
                        this.contactsPageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.contactsData = [];
                        this.contactsPageTotal = 0;
                    }
                });
            },
            /*新增联系人弹出框*/
            contactsAdd() {
                this.addContactsForm = {};
                this.addContactsVisible = true;
                this.isShow=false;
            },
            /*关闭新增联系人弹出框*/
            closeContactsAdd() {
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.addContactsVisible = false;
                        this.addContactsForm = {};
                        this.isShow=true;
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            /*保存新增联系人*/
            saveContactsAdd() {
                this.$refs['addContactsForm'].validate((valid) => {
                    if (valid) {
                        this.addContactsForm.fkId = this.contactsQuery.fkId;
                        console.log("传入后台的addContactsForm表单", this.addContactsForm);
                        //新增form表单提交到后台
                        doAddContacts(this.addContactsForm).then(res => {
                            if (res.data == 1) {
                                this.addContactsVisible = false;
                                this.addContactsForm = {};
                                this.$message.success('保存成功');
                                this.isShow=true;
                                selectPhoneByFkId(this.contactsQuery).then(resAll => {
                                    if (resAll.success == true) {
                                        this.contactsData = resAll.data;
                                        this.contactsPageTotal = resAll.total;
                                    } else {
                                        this.$message.error("查询失败！");
                                        this.contactsData = [];
                                        this.contactsPageTotal = 0;
                                    }
                                });
                            } else {
                                this.$message.error('保存失败');
                            }
                        });
                    }
                });
            },
            /*编辑联系人弹出框*/
            contactsEdit(index, row) {
                selectByconId({conId: row.conId}).then(res => {
                    if (res.success == true) {
                        this.editContactsForm = res.data;
                        this.editContactsVisible = true;
                        this.isShow=false;
                    } else {
                        this.$message.error('查询失败');
                    }
                });
            },
            /*关闭编辑弹出框*/
            colseContactsEdit(){
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.editContactsVisible = false;
                        this.editContactsForm = {};
                        this.isShow=true;
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消操作'
                        });
                    });
            },
            /*保存编辑联系人弹出框*/
            saveContactsEdit(){
                this.$refs['editContactsForm'].validate((valid) => {
                    if (valid) {   //form表单提交到后台
                        console.log("编辑的联系人：---", this.editContactsForm);
                        doUpdateContacts(this.editContactsForm).then(res => {
                            if (res.data == 1) {
                                this.editContactsVisible = false;
                                this.editContactsForm = {};
                                this.$message.success('编辑成功');
                                this.isShow=true;
                                selectPhoneByFkId(this.contactsQuery).then(resAll => {
                                    if (resAll.success == true) {
                                        this.contactsData = resAll.data;
                                        this.contactsPageTotal = resAll.total;
                                    } else {
                                        this.$message.error("查询失败！");
                                        this.contactsData = [];
                                        this.contactsPageTotal = 0;
                                    }
                                });
                            } else {
                                this.$message.error('编辑失败');
                            }
                        });
                    }
                });
            },
            /*删除联系人*/
            contactsDelete(index, row){
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        //后台进行删除操作
                        doDeleteContacts({"conId": row.conId}).then(res => {
                            if (res.success) {
                                this.$message.success('删除成功');
                                this.getData();
                            } else {
                                this.$message.error(res.data);
                                this.getData();
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            message: '已取消删除'
                        });
                    });
            },
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
        /*border-radius 属性允许您为元素添加圆角边框！*/
        border-radius: 6px;
        background-clip: padding-box;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    /*头像上传*/
    .user-header {
        position: relative;
        display: inline-block;
    }

    .user-header-com {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: inline-block;
    }

    .header-upload-btn {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        /* 通过定位把input放在img标签上面，通过不透明度隐藏 */
    }
</style>
